<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>注册</title>
    <!-- bootstrap样式，地图插件使用 -->
    <link href="../../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <!-- 样式 -->
    <link href="../../css/style.css" rel="stylesheet"/>
    <!-- 主题（主要颜色设置） -->
    <link href="../../css/theme.css" rel="stylesheet"/>
    <!-- 通用的css -->
    <link href="../../css/common.css" rel="stylesheet"/>
</head>
<style>
    html::after {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        content: '';
        display: block;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

    #swiper {
        overflow: hidden;
        margin: 0 auto;
    }

    #swiper .layui-carousel-ind li {
        width: 50px;
        height: 1px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(1, 1, 1, 0.3);
        border-radius: 30px;
        background-color: rgba(255, 0, 0, 1);
        box-shadow: 0 0 0px rgba(255, 0, 0, .8);
    }

    #swiper .layui-carousel-ind li.layui-this {
        width: 50px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.3);
        border-radius: 50px;
        background-color: rgba(0, 112, 126, 1);
        box-shadow: 0 0 0px rgba(15, 98, 108);
    }

    button, button:focus {
        outline: none;
    }

    .data-add-container .add .layui-select-title .layui-unselect {
        padding: 0 12px;
        height: 40px;
        font-size: 14px;
        color: #333;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: #DCDFE6;
        background-color: #fff;
        box-shadow: 0 0 0px rgba(255, 0, 0, .8);
        text-align: left;
    }

    .data-add-container .add .layui-form-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
        margin: 0;
        position: inherit;
        background: transparent;
        border: 0;
    }

    .data-add-container .add .layui-input-block {
        margin: 0;
        flex: 1;
    }

    .data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
        margin: 0;
        flex: 1;
        display: flex;
    }
</style>
<body style="background: #EEEEEE; ">


<div id="app">

    <!--
    <div class="layui-carousel" id="swiper">
        <div carousel-item id="swiper-item">
            <div v-for="(item,index) in swiperList" v-bind:key="index">
                <img class="swiper-item" :src="item.img">
            </div>
        </div>
    </div> -->
    <div :style='{"boxShadow":"0 0 6px rgba(15,98,108)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}' class="layui-carousel"
         id="swiper">
        <div carousel-item id="swiper-item">
            <div :key="index" v-for="(item,index) in swiperList">
                <img :src="item.img" style="width: 100%;height: 100%;object-fit:cover;"/>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->

    <div :style='{"padding":"20px","boxShadow":"0px 0px 0px rgba(0, 112, 126, 1)","margin":"30px auto","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"0","borderStyle":"solid"}'
         class="data-add-container">

        <form class="layui-form layui-form-pane add" lay-filter="myForm">

            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item" pane>
                <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">药品名称：</label>
                <div class="layui-input-block">
                    <input :readonly="ro.yaopinmingcheng"
                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"#DCDFE6","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"solid","height":"40px"}' autocomplete="off" class="layui-input"
                           id="yaopinmingcheng" name="yaopinmingcheng" type="text" v-model="detail.yaopinmingcheng">
                </div>
            </div>
            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item" pane>
                <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">药品类别：</label>
                <div class="layui-input-block">
                    <input :readonly="ro.yaopinleibie"
                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"#DCDFE6","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"solid","height":"40px"}' autocomplete="off" class="layui-input" id="yaopinleibie"
                           name="yaopinleibie" type="text" v-model="detail.yaopinleibie">
                </div>
            </div>
            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item" pane>
                <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">规格：</label>
                <div class="layui-input-block">
                    <input :readonly="ro.guige"
                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"#DCDFE6","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"solid","height":"40px"}' autocomplete="off" class="layui-input" id="guige" name="guige"
                           type="text" v-model="detail.guige">
                </div>
            </div>
            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item" pane>
                <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">厂家：</label>
                <div class="layui-input-block">
                    <input :readonly="ro.changjia"
                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"#DCDFE6","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"solid","height":"40px"}' autocomplete="off" class="layui-input" id="changjia" name="changjia"
                           type="text" v-model="detail.changjia">
                </div>
            </div>
            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item" pane>
                <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">数量：</label>
                <div class="layui-input-block">
                    <input :readonly="ro.shuliang"
                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"#DCDFE6","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"solid","height":"40px"}' autocomplete="off" class="layui-input" id="shuliang" name="shuliang"
                           type="text" v-model="detail.shuliang">
                </div>
            </div>
            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item" pane>
                <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">备注：</label>
                <div class="layui-input-block">
                    <input :readonly="ro.beizhu"
                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"#DCDFE6","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"solid","height":"40px"}' autocomplete="off" class="layui-input" id="beizhu" name="beizhu"
                           type="text" v-model="detail.beizhu">
                </div>
            </div>
            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item" pane>
                <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">出库日期：</label>
                <div class="layui-input-block">
                    <input :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"#DCDFE6","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"solid","height":"40px"}'
                           autocomplete="off" class="layui-input" id="chukuriqi" name="chukuriqi" type="text">
                </div>
            </div>
            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item" pane>
                <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">员工工号：</label>
                <div class="layui-input-block">
                    <input :readonly="ro.yuangonggonghao"
                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"#DCDFE6","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"solid","height":"40px"}' autocomplete="off" class="layui-input"
                           id="yuangonggonghao" name="yuangonggonghao" type="text" v-model="detail.yuangonggonghao">
                </div>
            </div>
            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item" pane>
                <label :style='{"width":"94px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">员工姓名：</label>
                <div class="layui-input-block">
                    <input :readonly="ro.yuangongxingming"
                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"#DCDFE6","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"solid","height":"40px"}' autocomplete="off" class="layui-input"
                           id="yuangongxingming" name="yuangongxingming" type="text" v-model="detail.yuangongxingming">
                </div>
            </div>


            <div :style='{"padding":"10px","boxShadow":"0 0 5px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item">
                <div class="layui-input-block" style="text-align: right;">
                    <button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(38, 155, 158, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}'
                            class="layui-btn btn-submit" lay-filter="*" lay-submit>提交
                    </button>
                    <button :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(0, 0, 0, 1)","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}'
                            class="layui-btn layui-btn-primary" type="reset">重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>
<!-- 校验格式工具类 -->
<script src="../../js/validate.js"></script>
<!-- 地图 -->
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0" type="text/javascript"></script>
<script src="../../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../js/bootstrap.AMapPositionPicker.js" type="text/javascript"></script>

<script>
    var jquery = $;

    var vue = new Vue({
        el: '#app',
        data: {
            // 轮播图
            swiperList: [{
                img: '../../img/banner.jpg'
            }],
            dataList: [],
            ro: {
                yaopinmingcheng: false,
                yaopinleibie: false,
                guige: false,
                changjia: false,
                shuliang: false,
                beizhu: false,
                chukuriqi: false,
                yuangonggonghao: false,
                yuangongxingming: false,
            },
            detail: {
                yaopinmingcheng: '',
                yaopinleibie: '',
                guige: '',
                changjia: '',
                shuliang: '',
                beizhu: '',
                chukuriqi: '',
                yuangonggonghao: '',
                yuangongxingming: '',
            },
            centerMenu: centerMenu
        },
        updated: function () {
            layui.form.render('select', 'myForm');
        },
        computed: {},
        methods: {
            jump(url) {
                jump(url)
            }
        }
    })


    layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate', 'tinymce'], function () {
        var layer = layui.layer;
        var element = layui.element;
        var carousel = layui.carousel;
        var http = layui.http;
        var jquery = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var tinymce = layui.tinymce

        // 获取轮播图 数据
        http.request('config/list', 'get', {
            page: 1,
            limit: 5
        }, function (res) {
            if (res.data.list.length > 0) {
                var swiperItemHtml = '';
                for (let item of res.data.list) {
                    if (item.name.indexOf('picture') >= 0 && item.value && item.value != "" && item.value != null) {
                        swiperItemHtml +=
                            '<div>' +
                            '<img style="width: 100%;height: 100%;object-fit:cover;" class="swiper-item" src="' + item.value + '">' +
                            '</div>';
                    }
                }
                jquery('#swiper-item').html(swiperItemHtml);
                // 轮播图
                vue.$nextTick(() => {
                    carousel.render({
                        elem: '#swiper',
                        width: '100%',
                        height: '400px',
                        arrow: 'hover',
                        anim: 'fade',
                        autoplay: 'true',
                        interval: '3000',
                        indicator: 'inside'
                    });

                })
                // carousel.render({
                // 	elem: '#swiper',
                // 	width: swiper.width,height:swiper.height,
                // 	arrow: swiper.arrow,
                // 	anim: swiper.anim,
                // 	interval: swiper.interval,
                // 	indicator: "none"
                // });
            }
        });

        laydate.render({
            elem: '#chukuriqi'
        });

        // session独取
        let table = localStorage.getItem("userTable");
        http.request(`${table}/session`, 'get', {}, function (data) {
            // 表单赋值
            //form.val("myForm", data.data);
            data = data.data
            for (var key in data) {
                if (key == 'yuangonggonghao') {
                    vue.detail[`${key}`] = data[`${key}`]
                    continue;
                }
                if (key == 'yuangongxingming') {
                    vue.detail[`${key}`] = data[`${key}`]

                }
            }
        });

        // 跨表
        if (http.getParam('corss')) {
            var obj = JSON.parse(localStorage.getItem('crossObj'));
            for (var o in obj) {
                if (o == 'yaopinmingcheng') {
                    vue.detail[o] = obj[o];
                    vue.ro.yaopinmingcheng = true;
                    continue;
                }
                if (o == 'yaopinleibie') {
                    vue.detail[o] = obj[o];
                    vue.ro.yaopinleibie = true;
                    continue;
                }
                if (o == 'guige') {
                    vue.detail[o] = obj[o];
                    vue.ro.guige = true;
                    continue;
                }
                if (o == 'changjia') {
                    vue.detail[o] = obj[o];
                    vue.ro.changjia = true;
                    continue;
                }
                if (o == 'shuliang') {
                    vue.detail[o] = obj[o];
                    vue.ro.shuliang = true;
                    continue;
                }
                if (o == 'beizhu') {
                    vue.detail[o] = obj[o];
                    vue.ro.beizhu = true;
                    continue;
                }
                if (o == 'chukuriqi') {
                    vue.detail[o] = obj[o];
                    vue.ro.chukuriqi = true;
                    continue;
                }
                if (o == 'yuangonggonghao') {
                    vue.detail[o] = obj[o];
                    vue.ro.yuangonggonghao = true;
                    continue;
                }
                if (o == 'yuangongxingming') {
                    vue.detail[o] = obj[o];
                    vue.ro.yuangongxingming = true;

                }
            }
        }

        vue.detail.shuliang = 0
        vue.ro.shuliang = false;

        // 提交
        form.on('submit(*)', function (data) {
            data = data.field;

            // 数据校验
            if (!isIntNumer(data.shuliang)) {
                layer.msg('数量应输入整数', {
                    time: 2000,
                    icon: 5
                });
                return false
            }

            // 跨表计算
            var obj = JSON.parse(localStorage.getItem('crossObj'));
            var table = localStorage.getItem('crossTable');
            obj.shuliang = obj.shuliang - data.shuliang
            if (obj.shuliang < 0) {
                layer.msg(`数量不足`, {
                    time: 2000,
                    icon: 5
                });
                return false
            }
            http.requestJson(`${table}/update`, 'post', obj, (res) => {
            });

            // 比较大小

            // 提交数据
            http.requestJson('yaopinchuku' + '/add', 'post', data, function (res) {
                layer.msg('提交成功', {
                    time: 2000,
                    icon: 6
                }, function () {
                    back();
                });
            });

            return false
        });

    });
</script>
</body>
</html>
